import React, {Component} from 'react';
// 7
import {hoc7} from "./hoc";
class App extends Component {
    render() {
        return (
            <div>
                <h3>App</h3>
                <p>userName:{this.props.userName}</p>
                <p>age:{this.props.age}</p>
            </div>
        );
    }
}
export default hoc7(function({userName,age}){
    return {
        userName,
        age
    }
})(App);


// 6-
// import {hoc6} from "./hoc";
// class App extends Component {
//     render() {
//         return (
//             <div>
//                 <h3>App</h3>
//                 <p>userName:{this.props.userName}</p>
//                 <p>age:{this.props.age}</p>
//             </div>
//         );
//     }
// }
// export default hoc6({
//     userName:"lisi",
//     age:99
// })(App);



// 5-
// import {hoc5} from "./hoc";
// class App extends Component {
//     render() {
//         return (
//             <div>
//                 <h3>App</h3>
//                 <p>userName:{this.props.userName}</p>
//                 <p>age:{this.props.age}</p>
//             </div>
//         );
//     }
// }
// export default hoc5(App,{
//     userName:"zhangsan",
//     age:88
// })

// 4- 传递参数1
// import {hoc4} from "./hoc";
// class App extends Component {
//     render() {
//         return (
//             <div>
//                 <h3>App</h3>
//                 <p>userName:{this.props.userName}</p>
//                 <p>age:{this.props.age}</p>
//             </div>
//         );
//     }
// }
// export default hoc4(App,"zhangsan",12)






// 3- 将高阶组件放置到外部
// import {hoc3} from "./hoc";
// class App extends Component {
//     render() {
//         return (
//             <div>
//                 <h3>App</h3>
//             </div>
//         );
//     }
// }
// export default hoc3(App)





// 2
// class App extends Component {
//     render() {
//         return (
//             <div>
//                 <h3>App</h3>
//             </div>
//         );
//     }
// }
// function hoc(WrappendComponent){
//     return class extends React.Component{
//         render(){
//             return <WrappendComponent/>
//         }
//     }
// }
// export default hoc(App);



// 1
// class App extends Component {
//     render() {
//         return (
//             <div>
//                 <h3>App</h3>
//             </div>
//         );
//     }
// }
// function hoc(WrappendComponent){
//     return WrappendComponent;
// }
// export default hoc(App);

